<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<!-- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> -->
				<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
					<div class="panel-search-box">
						<span class="demonstration" style="margin-left: 10px">是否变更:</span>
						<el-select v-model="search.changeState">
							<el-option :value="1" label="已变更"></el-option>
							<el-option :value="2" label="未变更"></el-option>
						</el-select>
					</div>
					<div class="panel-search-box">
						<span class="demonstration" style="margin-left: 10px">变更类型:</span>
						<el-select v-model="search.changeType">
							<el-option :value="1" label="部门变更-CHC事业群"></el-option>
							<el-option :value="2" label="部门变更-其他事业群"></el-option>
							<el-option :value="3" label="入职"></el-option>
							<el-option :value="4" label="离职"></el-option>
							<el-option :value="0" label="其他"></el-option>

						</el-select>
					</div>
					<div class="panel-search-box">
						<span class="demonstration" style="margin-left: 10px">姓名:</span>
						<el-input @keyup.enter="upsearch" v-model="search.name" placeholder="请选择" style="margin-left: 10px; width: 180px"
							clearable></el-input>
					</div>
					<div class="panel-search-box">
						<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
						<el-button type="" @click="cleanSearch">清空</el-button>
						<el-button type="" @click="multipleChange" :disabled="selection.length == 0"
							:loading="multiplechangeLoading">批量变更</el-button>

					</div>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" border stripe :apiObj="apiObj" row-key="id" @selection-change="selectionChange">
				<el-table-column align="center" type="selection" width="50" :selectable="selectable"></el-table-column>
				<el-table-column align="center" label="时间" prop="changeDt" width="150"></el-table-column>
				<el-table-column align="center" label="姓名" prop="name" width="150"></el-table-column>
				<el-table-column align="center" label="账号" prop="accountId" width="150"></el-table-column>
				<el-table-column align="center" label="员工编码" prop="empNum" width="150"></el-table-column>
				<el-table-column align="center" label="变更类型" prop="changeType" width="150">
					<template #default="scope">
						<span v-if="scope.row.changeType == 1">部门变更-CHC事业群</span>
						<span v-if="scope.row.changeType == 2">部门变更-其他事业群</span>
						<span v-if="scope.row.changeType == 3">入职</span>
						<span v-if="scope.row.changeType == 4">离职</span>
						<span v-if="scope.row.changeType == 0">其他</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="部门变更前" prop="deptChangeBefore" width="150"></el-table-column>
				<el-table-column align="center" label="组织变更前" prop="orgChangeBefore" width="150"></el-table-column>
				<el-table-column align="center" label="岗位变更前" prop="jobChangeBefore" width="150"></el-table-column>
				<el-table-column align="center" label="角色变更前" prop="roleChangeBefore" width="150"></el-table-column>
				<el-table-column align="center" label="部门变更后" prop="deptChangeAfter" width="150"></el-table-column>
				<el-table-column align="center" label="组织变更后" prop="orgChangeAfter" width="150"></el-table-column>
				<el-table-column align="center" label="岗位变更后" prop="jobChangeAfter" width="150"></el-table-column>
				<el-table-column align="center" label="角色变更后" prop="roleChangeAfter" width="150"></el-table-column>
				<el-table-column align="center" label="变更操作人" prop="opName" width="150"></el-table-column>
				<el-table-column align="center" label="操作时间" prop="updateTime" width="150"></el-table-column>
				<el-table-column align="center" label="变更状态" prop="changeState" width="150">
					<template #default="scope">
						<!-- <el-tag v-if="scope.row.executeType == -1" type="primary">Common</el-tag> -->
						<span v-if="scope.row.changeState == 1">已变更</span>
						<span v-if="scope.row.changeState != 1">未变更</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template #default="scope">
						<el-button-group>
							<!-- <el-button text type="primary" size="small"
								@click="table_show(scope.row, scope.$index)">查看</el-button>
							<el-button text type="primary" size="small"
								@click="table_edit(scope.row, scope.$index)">编辑</el-button> -->

							<el-popconfirm title="确定要变更吗？" @confirm="change(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="primary" size="small" :loading="changeLoading"
										:disabled="scope.row.changeState == 1">变更组织/角色</el-button>
								</template>
							</el-popconfirm>
						</el-button-group>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>

	<!-- <save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save = false">
	</save-dialog>
	<edit-dialog v-if="dialog.edit" ref="editDialog" @success="handleSaveSuccess" @closed="dialog.edit = false">
	</edit-dialog> -->
</template>

<script>
// import { search } from 'core-js/fn/symbol'
// import saveDialog from './add'
// import editDialog from './edit'
export default {
	name: 'change',
	components: {
		// saveDialog,
		// editDialog,
	},
	data() {
		return {
			index: false,
			dialog: {
				save: false,
				edit: false
			},
			apiObj: this.$API.hrPersonChange.list,
			selection: [],
			search: {
				// keyword: null
			},
			changeLoading: false,
			multiplechangeLoading: false
		}
	},
	methods: {
		//添加
		// add() {
		// 	this.dialog.save = true
		// 	this.$nextTick(() => {
		// 		this.$refs.saveDialog.open()
		// 	})
		// },
		//编辑
		// table_edit(row) {
		// 	this.dialog.edit = true
		// 	this.$nextTick(() => {
		// 		this.$refs.editDialog.open('edit').setData(row)
		// 	})
		// },
		//查看
		// table_show(row) {
		// 	this.dialog.edit = true
		// 	this.$nextTick(() => {
		// 		this.$refs.editDialog.open('show').setData(row)
		// 	})
		// },
		//删除
		// async table_del(row) {
		// 	var reqData = { id: row.id, orgId: row.orgId }
		// 	var res = await this.$API.dept.delete.post({ data: reqData });
		// 	if (res.code == 0) {
		// 		this.$refs.table.refresh()
		// 		this.$message.success("删除成功")
		// 	} else {
		// 		this.$alert(res.message, "提示", { type: 'error' })
		// 	}
		// },
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload()
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			this.dialog.save = false
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		},
		// 变更组织角色
		async change(data) {
			this.changeLoading = true
			let req = []
			req.push({ id: data.id, empNum: data.empNum })

			var res = await this.$API.hrPersonChange.changeList.post({ data: req })
			if (res && res.code == 0) {
				this.$message.success("操作成功")
				this.$refs.table.reload()
			}
			this.changeLoading = false
		},
		//批量变更组织角色
		async multipleChange() {
			this.multiplechangeLoading = true
			let req = []
			this.selection.forEach((item) => {
				req.push({ id: item.id, empNum: item.empNum })
			})

			var res = await this.$API.hrPersonChange.changeList.post({ data: req })
			// if (res && res.code == 0) { 

			// }
			this.multiplechangeLoading = false
		},
		selectable(row) {
			return row.changeState == '2'
		}
	}
}
</script>

<style></style>
